<html>
<head>
    {% load static %}
    <meta charset="utf-8">
    <title>{{ year }}年{{ month }}月工资条</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.css">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.min.css">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css'  %}">
    <style>
        .custom_border_left{
            margin-left: 10px;
            padding-left: 1px;
            padding-top: 5px;
            line-height: 1.6;
            border-left: 5px solid #5FB878;
            border-radius: 0 2px 2px 0;
            background-color: #FAFAFA;

        }
        .custom_header{
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
            height: 160px;
            border-radius: 5px;
            background: #0c84ff url("{% static 'images/ent_wechat_backgrong.png' %}") -80px -350px;;
        }
        .weui-btn:after {
            border: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="custom_header">
        <h3 style="text-align: center;padding-top: 25px; font-size: 16px; color: white;">实发工资（元）</h3>
        <h3 style="text-align: center;font-size: 36px; color: white;">{{ total_money }}</h3>
        <h4 style="text-align: center;font-size: 16px; color: white">{{ company_name }}</h4>
        <h4 style="text-align: center;font-size: 12px; color: gainsboro">ID:{{ mark_id }}</h4>
    </div>
    <div class="page__body">
        <div class="weui-cells__title custom_border_left">&nbsp;工资明细</div>
        <div class="weui-cells" style="position: relative;">
            {% for d in data %}
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>{{ d.title }}</p>
                </div>
                <div class="weui-cell__ft">{{ d.contents }}</div>
            </div>
            {% endfor %}
        </div>
        <div style="height: 80px;"></div>
        <div style="padding-top: 10px;position: fixed;bottom:0px;width: 100%;z-index: 99999;">
        <p style="font-size: 11px;margin-left: 10px;color: #0c84ff">温馨提示：工资条属于敏感信息，请注意保密。</p>
            {% if confirm_url != "1" %}
                <div style="display: flex; border-top: 2px solid #2f7dcd;">
                    <div style="width: 50%; background-color: white;">
                        <h4 style="margin: 15px 0 0 0;text-align: center;"><a href="javascript:;" id="question_start" style="color: #0c84ff; ">对薪资信息有疑问？</a></h4>
                    </div>
                    <div style="width: 50%">
                        <button href="javascript:;" onclick="confirm_result()" class="weui-btn weui-btn_primary" style="height: 50px;border-radius: 0;">
                        <i class="weui-icon-success weui-icon_msg" style="font-size: 25px; color: #fff;padding-top: -5px;"></i>
                        &nbsp确认以上信息
                        </button>
                    </div>
                </div>
                <div id="done" style="display: flex; border-top: 2px solid #09bb07;">
                    <div style="width: 50%; background-color: white;">
                        <h4 style="margin: 15px 0 0 0;text-align: center;"><a href="javascript:;" id="question_start" style="color: #0c84ff; ">对薪资信息有疑问？</a></h4>
                    </div>
                    <div style="width: 50%">
                        <button href="javascript:;" class="weui-btn weui-btn_success" style="height: 50px;background-color: #09bb07;border-radius: 0;">
                        <i class="weui-icon-success weui-icon_msg" style="font-size: 25px; color: #fff;padding-top: -5px;"></i>
                        &nbsp已确认
                        </button>
                    </div>
                </div>
            {% else %}
                <div style="display: flex; border-top: 2px solid #09bb07;">
                    <div style="width: 50%; background-color: white;">
                        <h4 style="margin: 15px 0 0 0;text-align: center;"><a href="javascript:;" id="question_start" style="color: #0c84ff; ">对薪资信息有疑问？</a></h4>
                    </div>
                    <div style="width: 50%">
                        <button href="javascript:;" class="weui-btn weui-btn_success" style="height: 50px;background-color: #09bb07;border-radius: 0;border: none!important;">
                        <i class="weui-icon-success weui-icon_msg" style="font-size: 25px; color: #fff;padding-top: -5px;"></i>
                        &nbsp已确认
                        </button>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    <!--隐藏窗口元素-->
        <!--BEGIN 疑问联系窗口-->
        <div class="js_dialog" id="question" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__bd">对此薪资信息有疑问，请联系：{{ wechat_admin }}咨询。</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="sure_1">知道了</a>
                </div>
            </div>
        </div>
        <!--END 疑问联系窗口-->
    <!--BEGIN 工资条确认窗口-->
        <div class="js_dialog" id="ok_done" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__bd">确认成功！</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" id="sure_2">知道了</a>
                </div>
            </div>
        </div>
        <!--END 疑问联系窗口-->

</div>
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    $(document).ready(function(){
        $("#done").hide();
    });
    // 点击确认
    function confirm_result(){
        $.get("{{ confirm_url }}&f=ent_wechat",function(data,status){
            if(data.status == 1){
                // 请求确认成功
                $(function(){
                    // 展现确认窗口
                    var $ok_done = $("#ok_done");
                    $ok_done.fadeIn(200);
                    // 点击退出确认窗口
                    $('#sure_2').on('click', function(){
                        $(this).parents('.js_dialog').fadeOut(200);
                    });

                })
                // 隐藏确认div
                $("#confirm").hide();
                $("#done").show();
            }else if(data.status == 0){
                // 确认失败
                alert(data.info)
            }else {
                // 非法访问
                alert("非法访问！")
            }
    });
    }
</script>
<script type="text/javascript">
        // 疑问联系
    $(function(){
        var $quest_info = $("#question");
        $('#sure_1').on('click', function(){
            $(this).parents('.js_dialog').fadeOut(200);
        });
        $('#question_start').on('click', function(){
            $quest_info.fadeIn(200);
        });
    })
</script>
</body>
</html>